<template>
	<view class="u-rela">
		<view class="page-top">
			<image :src="column_detail.image == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-build-1.png' : column_detail.image"
				mode="widthFix"></image>
			<div class="text-wrap">
				<view class="text-1">{{ column_detail.title}}</view>
				<view class="text-2">虽由人作、宛自天开，梦里老家，寄托乡愁</view>
			</div>
		</view>
		<view class="page-wrap">
			<view class="desc">
				{{ column_detail.content}}
			</view>
			<view class="u-font-36 blod u-m-t-20">结构介绍</view>
			<view class="jiegou-wrap u-m-t-20">
				<!-- tab切换 -->
				<u-tabs height="100" font-size="34" bg-color="#EEF2F1" active-color="#000000" inactive-color="#999999"
					bar-width="80" bar-height="14"
					:bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
					:active-item-style="{zIndex:1}" :list="list" :is-scroll="true" :current="current" @change="change">
				</u-tabs>
				<div class="card-bg-w">
					<div class="desc u-m-t-0" v-html="villages_structure_data">

					</div>
				</div>
			</view>
			<view class="u-font-36 blod u-m-t-20">
				不可错过的精彩建筑
			</view>
		</view>
		<!-- 建筑名称 -->
			<view class="card-bg-w u-m-t-20 u-rela" v-for="item in villages_feelings_list" :key="item.id">
				<scroll-view scroll-x class="img-wrap">
					<!-- <view class="grid"> -->
						<image
							:src="item.thumbnail == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-build-2.png' : item.thumbnail"
							mode=""></image>
					<!-- </view> -->
				</scroll-view>
				<div class="u-flex u-row-between u-m-b-20">
					<view class="u-font-32">{{ item.title }}</view>
					<!-- <div class="btn-view">
						<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-view-w.png"
							mode="widthFix"></image>
						<text>查看</text>
					</div> -->
				</div>
				<u-read-more class="read-more" :shadow-style="shadowStyle" show-height="160" close-text="展开"
					:toggle="true">
					<rich-text :nodes="item.content"></rich-text>
				</u-read-more>
			</view>
		
		<!-- 留言 -->
		<view class="msg-wrap">
			<view class="u-flex">
				<image class="icon-comment"
					src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-comment.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">留言</text>
			</view>
			<view style="display: flex; align-items: stretch;" class="u-m-t-20">
				<input v-model="comment" placeholder="请输入留言内容" style="width: 85%; background-color: #F8F8F8; padding: 0 10rpx;height: 50rpx;margin-right:10rpx" />
				<view size="default" @click="toComment" type="default" style="color: #ffffff; background-color:#1AAD19;margin: 0; padding: 10rpx; border-radius: 10rpx;" hover-class="is-hover">
					提交
				</view>
			</view>
			<div class="list">
				<div class="item" v-for="item in commentList" :key="item.message_id">
					<image :src="item.userinfo.avatar == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png' : item.userinfo.avatar"
						mode="widthFix"></image>
					<div class="u-font-28 blod">{{ item.userinfo.nickname }}</div>
					<text class="u-font-24 u-tips-color">{{ item.time }}</text>
					<view class="u-font-28 u-m-t-30">{{ item.content }}</view>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				list: [
					// 	{
					// 	name: '木质结构'
					// }, {
					// 	name: '石质结构'
					// }, {
					// 	name: '生土结构'
					// },
				],
				current: 0,
				content1: `余江丝翎浮雕是余江雕刻从业者在传统浮雕技艺基础上派生出来的一种木雕技艺。于上世纪五十年代末期在江西余江得到广泛推广，迄今已有六十余年的历史。余江丝翎浮雕是余江雕刻从业者在传统浮雕技艺基础上派生出来的一种木雕技艺。于上世纪五十年代末期在江西余江得到广泛推广，迄今已有六十余年的历史。`,
				content2: `余江被誉为“木雕之乡”， 2013年余江木雕列入江西省第四批非物质文化遗产代表性名录。
余江木雕源于唐宋，兴盛于明清。余江被誉为“木雕之乡”， 2013年余江木雕列入江西省第四批非物质文化遗产代表性名录。
余江木雕源于唐宋，兴盛于明清`,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},

				villages_feelings_list: [],
				villages_structure_data: '',
				commentList: [],
				id: 0,
				comment: '',
				page: 1,
				isNext: true,
				column_detail: []
			}
		},
		onLoad() {
			// 建筑风情列表
			this.get_villages_feelings();

			// 建筑风情结构介绍
			this.get_villages_structure();

			// 评论列表
			this.get_comment_index()
			
			// 栏目详情内容
			this.get_columns_detail()
		},
		onPullDownRefresh() {
			// 建筑风情列表
			this.get_villages_feelings();
			
			// 建筑风情结构介绍
			this.get_villages_structure();
			
			// 评论列表
			this.get_comment_index()
			
			// 栏目详情内容
			this.get_columns_detail()
		},
		methods: {
			change(index) {
				this.current = index;
				this.villages_structure_data = this.list[this.current].stone || this.list[this.current].wood || this.list[
					this.current].earth
			},

			// 建筑风情列表
			get_villages_feelings() {
				this.$http({
					url: this.api.villages_feelings,
					method: 'GET'
				}).then(res => {
					// console.log(res,'建筑风情列表');
					if (res.code == 1) {
						uni.stopPullDownRefresh();
						this.villages_feelings_list = res.data.list
						
						this.villages_feelings_list.forEach(item=>{
							// 评论列表
							this.get_comment_index(item.id)
							this.id = item.id
						})
						
					}
				})
			},

			// 建筑风情结构介绍
			get_villages_structure() {
				this.$http({
					url: this.api.villages_structure,
					method: 'GET'
				}).then(res => {
					// console.log(res,'建筑风情结构介绍');
					if (res.code == 1) {
						uni.stopPullDownRefresh();
						this.list = res.data
						this.change(this.current)
					}
				})
			},
			
			// 栏目详情
			get_columns_detail() {
				this.$http({
					url: this.api.columns_detail,
					method: 'GET',
					data: {
						id: 1
					}
				}).then(res => {
					if (res.code == 1) {
						this.column_detail = res.data
					}
				})
			},
			

			// 评论列表
			get_comment_index(target_id) {
				this.$http({
					url: this.api.comment_index,
					method: 'GET',
					data: {
						type: 7,
						target_id,
						page: this.page
					}
				}).then(res => {
					if (res.code == 1) {
						this.page += 1;
						this.commentList = [...this.commentList, ...res.data.list]
						this.isNext = res.data.isNext
					}
				})
			},
			
			// 评论
			toComment() {
				this.$http({
					url: this.api.comment_add,
					method: 'POST',
					data: {
						type: 7,
						target_id: this.id,
						content: this.comment
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '评论成功',
							duration: 2000
						});
						
						this.comment = ''
						this.commentList = []
						this.page = 1
						this.isNext = true
						
						this.get_comment_index(this.id)
					}
				})
			},
			
			// 滚动条触底
			onReachBottom(){
				if (!this.isNext) return
				
				this.get_comment_index(this.id)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-top {
		position: relative;
		width: 750rpx;
		height: 500rpx;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
		}

		.text-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			text-align: center;

			.text-1 {
				font-size: 60rpx;
				font-family: AlimamaDongFangDaKai;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 140rpx;
			}

			.text-2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 78rpx;
			}
		}
	}

	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;

		.desc {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
			margin-top: 20rpx;
		}


	}

	.jiegou-wrap {
		width: 690rpx;
		// height: 500rpx;
		background: #EEF2F1;
		border-radius: 20rpx;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.img-wrap {
		width: 690rpx;
		// height: 320rpx;
		margin-top: 35rpx;
		margin-bottom: 20rpx;

		.grid {
			width: 1200rpx;
			display: grid;
			gap: 0 30rpx;
			grid-template-columns: repeat(auto-fill, 570rpx);

		}

		image {
			width: 100%;
			// height: 320rpx;
			// margin:0 auto;
			display: block;
		}
	}

	.btn-view {
		width: 140rpx;
		height: 56rpx;
		background: #07C160;
		border-radius: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.read-more {
		/deep/ .u-content__showmore-wrap {
			justify-content: flex-start;
			width: 160rpx;
			height: 66rpx;
			background: #F7FEFC;
			border: 1px solid #07C160;
			border-radius: 33rpx;
			padding-bottom: 0;
			text-align: center;
			padding-left: 38rpx;

			text {
				font-size: 28rpx !important;
				color: #07C160 !important;
			}
		}

	}
</style>
<style>
	page {
		padding: 0;
		background-color: #F2F2F2;
	}
</style>